<template>
    <div class="app-container">
        <div class="block">{{ uploadTitle }}</div>

        <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :headers="headers"
        >
            <img v-if="value" :src="value" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </div>
</template>

<script>
import { server_URL } from '@/urlConfig'

export default {
    name: 'Upload',
    props: ['uploadTitle', 'value'],
    computed: {
        imgUrl() {
            return server_URL + this.value
        },
        headers() {
            return {
                Authorization: 'Bearer ' + localStorage.getItem('adminToken')
            }
        }
    },
    data() {
        return {
            imageUrl: ''
        }
    },
    methods: {
        handleAvatarSuccess(res, file) {
            if(!res.code && res.data){
                this.$emit('input', res.data)
            }
        },
    }
}
</script>

<style scoped lang="scss">
.block {
    margin: 15px 0;
    font-weight: 100;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
